<template>
  <codemirror
    v-model="_value"
    :disabled="props.disabled"
    :placeholder="editorPlaceholder"
    :style="{ height: editorHeight + 'px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tabSize="tabSize"
    :extensions="[oneDark, javascript(), json()]"
    :scrollbarStyle="null"
    @change="emit('change', $event)"
  />
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { Codemirror } from "vue-codemirror";
import { vue } from "@codemirror/lang-vue";
import { json } from "@codemirror/lang-json";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

type PropsType = {
  value: any;
  disabled?: boolean;
  editorHeight?: number;
  editorPlaceholder?: string;
  tabSize?: number;
};
let emit = defineEmits(["change"]);
let props = withDefaults(defineProps<PropsType>(), {
  modelValue: "",
  disabled: false,
  editorHeight: 500,
  editorPlaceholder: "请输入代码",
  tabSize: 2,
});

let _value = computed({
  get: () => props.value,
  set: (val) => {
    // emit("update:modelValue", val);
  },
});
</script>

<style scoped lang="scss"></style>
